<template>
	<view class="container">
		<view class="tui-order-header">
			<image src="../../static/img/order/img_detail_bg.png" mode="widthFix" class="tui-img-bg"></image>
			<view class="tui-header-content">
				<view>
					<view class="tui-status-text">{{getStatusText(status)}}</view>
					<view class="tui-reason">
						<text class="tui-reason-text">{{getReason(status)}}</text>
					<tui-countdown :time="countdown" color="rgba(254,254,254,0.75)" colonColor="rgba(254,254,254,0.75)" borderColor="transparent"
						backgroundColor="transparent" v-if="status===1" :isColon="false" ></tui-countdown>
						<tui-countdown :time="countdownTwohours" color="rgba(254,254,254,0.75)" colonColor="rgba(254,254,254,0.75)" borderColor="transparent"
						  backgroundColor="transparent" v-if="status===2" :isColon="false" ></tui-countdown>
						<tui-countdown :time="countdown14Days" :scale="true" v-if="status===3" :isColon="false" :days="true" color="rgba(254,254,254,0.75)" colonColor="rgba(254,254,254,0.75)" borderColor="transparent"
						backgroundColor="transparent"></tui-countdown> 
						<tui-countdown :time="countdow7Days" :scale="true" v-if="status===4" :isColon="false" :days="true" color="rgba(254,254,254,0.75)" colonColor="rgba(254,254,254,0.75)" borderColor="transparent"
						backgroundColor="transparent"></tui-countdown>
					</view>
				</view>
			</view>
		</view>
		<!-- <tui-list-cell :arrow="true" bgcolor="#fefefe">
			<view class="tui-flex-box">
				<image :src="webURL+'img_order_logistics3x.png'" class="tui-icon-img"></image>
				<view class="tui-logistics">
					<view class="tui-logistics-text">快递已到收货点，请注意查收哦! 投递员: XXX 联系电话: 17788849992</view>
					<view class="tui-logistics-time">2019-06-03 12:02</view>
				</view>
			</view>
		</tui-list-cell> -->
		
		<!-- 地址 -->
		<tui-list-cell :last="true" :hover="false">
			<view class="tui-flex-box">
				<text class="iconfont">&#xe622;</text>
				<view class="tui-addr">
					<view class="tui-addr-userinfo"> {{orderInfo.addressData.name}}
					<text class="tui-addr-tel">{{orderInfo.addressData.mobile}}</text>
					</view>
					<view class="tui-addr-text">
						{{orderInfo.addressData.address}} {{orderInfo.addressData.area}} 
					</view>
				</view>
			</view>
		</tui-list-cell>
		
		<view class="tui-order-item">
			<tui-list-cell :hover="false" :lineLeft="false" style="padding-top: 0;">
				<view class="tui-goods-title"> 商品信息 </view>
			</tui-list-cell>
			<block v-for="(item,index) in orderInfo.goodsList" :key="index">
				<tui-list-cell padding="0">
					<view class="tui-goods-item">
						<image :src="webURL+item.image" class="tui-goods-img"></image>
						<view class="tui-goods-center">
							<view class="tui-goods-name">{{item.goods_name}}</view>
							<view class="tui-goods-attr">
								<text v-if="item.discount<10 && item.discount > 0">
									{{item.discount}}折
								</text>
								<view v-if="item.activity_name">满减</view>
							</view>
						</view>
						<view class="tui-price-right">
							<view>
								<text class="food-primeCost" v-if="item.old_price != item.price">
								￥{{item.old_price}}
								</text>
								￥{{item.price}}
							</view>
							<view>x{{item.goods_count}}</view>
						</view>
					</view>
				</tui-list-cell>
			</block>
			<view class="tui-goods-info">
				<view class="tui-price-flex tui-size24">
					<view>商品总额</view>
					<view>￥{{orderInfo.goods_money}}</view>
				</view>
				<view class="tui-price-flex  tui-size24">
					<view>优惠金额 (折扣/满减)</view>
					<view>￥{{orderInfo.discount_money}}</view>
				</view>
				<view class="tui-price-flex  tui-size24">
					<view>配送费</view>
					<view>￥{{orderInfo.delivery_fee}}</view>
				</view>
				<view class="tui-price-flex tui-size32 tui-pbtm20">
					<view class="tui-flex-shrink">合计</view>
					<view class="tui-goods-price">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{orderInfo.order_money}}</view>
					</view>
				</view>
				<view class="tui-price-flex tui-size32">
					<view class="tui-flex-shrink">实付款</view>
					<view class="tui-goods-price tui-primary-color">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{orderInfo.order_money}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="tui-order-info">
			<tui-list-cell :hover="false">
				<view class="tui-order-title">
					订单信息
				</view>
			</tui-list-cell>
			<view class="tui-order-content">
				<view class="tui-order-flex">
					<view class="tui-item-title">订单编号 </view>
					<view class="tui-item-content">{{orderInfo.order_no}}</view>
				</view>
				<!-- <view class="tui-order-flex">
					<view class="tui-item-title">物流单号:</view>
					<view class="tui-item-content">33655511251265578556</view>
				</view> -->
				<view class="tui-order-flex">
					<view class="tui-item-title">创建时间 </view>
					<view class="tui-item-content">{{orderInfo.create_time}}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">付款时间 </view>
					<view class="tui-item-content">{{orderInfo.pay_time || ''}}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">发货时间 </view>
					<view class="tui-item-content">{{orderInfo.send_time || ''}}</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">订单备注 </view>
					<view class="tui-item-content">{{orderInfo.remark || ''}}</view>
				</view>
			</view>
		</view>
		<view class="tui-safe-area"></view>
		<view class="tui-tabbar" v-if="status != 0">
			<button class="action-btn" @click="cancelOrder" v-if="status===1">关闭订单</button>
			<button class="action-btn"  @click="contact()" >联系商家</button>
			<button class="action-btn" v-if="[5,2,4].indexOf(status)!=-1" @click="afterSale()">申请售后</button>
			<button class="action-btn recom" @click="payment" v-if="status===1">立即支付</button>
			<button class="action-btn recom"  @click="updateOrderState(4)" v-if="status == 3">确认收货</button>
			<button class="action-btn recom" v-if="status == 4" @click="evaluate()" >去评价</button>
		</view>
		
		<tui-actionsheet :show="showActionSheet" :item-list="itemList" :mask-closable="true"
		 :color="'#9a9a9a'" :size="26" :is-cancel="true" @click="itemClick" @cancel="closeActionSheet"></tui-actionsheet>
	</view>
</template>

<script>
	import tuiCountdown from "@/components/thor-ui/tui-countdown/tui-countdown"
	import tuiListCell from "@/components/thor-ui/tui-list-cell/tui-list-cell"
	import tuiActionsheet from "@/components/thor-ui/tui-actionsheet/tui-actionsheet"
	import config from '@/config/config'
	
	export default {
		components: {
			tuiCountdown,
			tuiListCell,
			tuiActionsheet
		},
		data() {
			return {
				webURL: config.effectiveUrl().replace("index.php/","/"),
				status:100,			//0交易关闭 1-待付款 2-付款成功 3-待收货 4-订单已完成 
				orderInfo:{
					goodsList:[], 	//商品列表
					addressData:{} 	,//地址数据
					create_time: "",
					send_time:"",
					receive_ok_time:''
				},
				order_no:'',
				mode:0  			,//等于1的时候，从缓存获取数据，不然从接口获取
				
				// 售后
				showActionSheet: false,
				itemList:[
					{text: "我要退款无需退货",attr:"没收到货，或与卖家协议同意不用退货"},
					{text: "我要退货退款",attr:"已收到货，需要退还收到的货物"}
				]
			}
		},
		computed: {
			countdown:function(){
				// 倒计时半小时过期
				let timestamp = new Date().getTime();
				let create_time = this.orderInfo.create_time.replace(new RegExp("-","gm"),"/");
				return ((new Date(create_time).getTime() + 30 * 60 * 1000) - timestamp ) / 1000;
			},
			countdownTwohours:function(){
				// 倒计时两小时过期
				let timestamp = new Date().getTime();
				let pay_time = String(this.orderInfo.pay_time).replace(new RegExp("-","gm"),"/");
				return ((new Date(pay_time).getTime() + 2 * 60 * 60 * 1000) - timestamp ) / 1000;
			},
			countdown14Days:function(){
				// 14天自动完成
				let timestamp = new Date().getTime();
				let send_time = String(this.orderInfo.send_time).replace(new RegExp("-","gm"),"/");
				return ((new Date(send_time).getTime() + 14*24*60*60 * 1000) - timestamp ) / 1000;
			},
			countdow7Days:function(){
				// 7天自动完成
				let timestamp = new Date().getTime();
				let receive_ok_time = String(this.orderInfo.receive_ok_time).replace(new RegExp("-","gm"),"/");
				return ((new Date(receive_ok_time).getTime() + 7*24*60*60 * 1000) - timestamp ) / 1000;
			}
		},
		onLoad(options) {
			this.order_no = options.order_no;
			this.mode = options.mode;
		},
		onShow(){
			this.getOrderInfo();
		},
		methods: {
			getStatusText: function(status) {
				return [
					"交易取消",
					"等待您付款",
					"已付款-等待商家确认", 
					"商家已接单-正在配送",
					"待评价",
					"订单已完成",
					"订单自动关闭",
					"",
					"",
					"交易关闭",
					"退款申请中",
					"退款申请通过",
					"已收到退货-待退款",
					"退款完成",
					"申请被驳回",
				][status]
			},
			getReason: function(status) {
				return [
					"订单已关闭", 
					"剩余时间", 
					"2小时内未确认将自动退款至原账户", 
					"自发货14天后将自动完成订单", 
					"自确认收货7天后将自动完成订单", 
					"",
					"超时未付款，订单已自动关闭",
					"",
					"",
					"",
					"等待卖家审核",
					"请尽快把货物寄回卖家",
					"等待卖家退款",
					"",
					"请联系商家沟通后重新发起申请",
				][status]
			},
			// 获取订单数据
			getOrderInfo(){
				// 从缓存获取
				let ordersData = uni.getStorageSync("ordersData");
				if(this.mode == 1 && ordersData && ordersData[0]){
					ordersData.forEach(h=>{
						if(h.order_no == this.order_no){
							this.orderInfo = h;
							this.status = this.orderInfo.state;
						}
					});
					// 让缓存只能用一次，刷新页面或者返回都必须从接口重新获取
					uni.setStorageSync("ordersData",[]);
					return false;
				}
				// 从请求获取
				this.$request("/app/v1/Order/getOrderInfo",{
					order_no:this.order_no
				}).then(res=>{
					this.orderInfo = res.data;
					this.status = this.orderInfo.state;
				});
			},
			//关闭订单
			cancelOrder(){
				let that = this;
				this.$util.modal("确定关闭订单？",()=>{
					that.$request("/app/v1/Order/setOrderState",{
						order_no:this.order_no,
						state:0
					}).then((res)=>{
						this.status = 0;
					});
				});
			},
			// 立即支付
			payment(){
				uni.navigateTo({ url: '/pages/money/pay?order_no=' +this.order_no+"&page=orderDetail"})
			},
			// 更新订单状态
			updateOrderState(state,content){
				var that = this;
				var content = '';
				if(state == 4){
					content = '确定收货？';
				}
				this.$util.modal(content,()=>{
					that.$request("/app/v1/Order/setOrderState",{
						order_no:this.order_no,
						state:state,
					}).then((res)=>{
						this.status = state;
					});
				});
			},
			// 去评价
			evaluate(){
				uni.navigateTo({ url: '/pages/order/issue?order_no=' +this.order_no})
			},
			// 联系商家
			contact(){
				uni.navigateTo({ url: '/pages/msg/chat?order_no=' +this.order_no})
			},
			// 申请售后
			afterSale(){
				this.showActionSheet = true;
			},
			closeActionSheet: function() {
				this.showActionSheet = false;
			},
			itemClick: function(e) {
				uni.navigateTo({
					url: '/pages/order/afterSale?order_no='+this.order_no
						+"&type="+e.index
						+"&order_money="+ this.orderInfo.order_money
				});
				this.showActionSheet = false;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-bottom: 118rpx;
		width: 100%;
	}

	.tui-order-header {
		width: 100%;
		height: 160rpx;
		position: relative;
	}

	.tui-img-bg {
		width: 100%;
		height: 160rpx;
	}

	.tui-header-content {
		width: 100%;
		height: 160rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-status-text {
		font-size: 36rpx;
		line-height: 36rpx;
		color: #FEFEFE;
	}

	.tui-reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}

	.tui-reason-text {
		padding-right: 12rpx;
	}

	.tui-status-img {
		width: 80rpx;
		height: 80rpx;
		display: block;
	}

	.tui-flex-box {
		width: 100%;
		display: flex;
		align-items: center;
		.iconfont{
			font-size: 20px;
		}
	}

	.tui-icon-img {
		width: 44rpx;
		height: 44rpx;
		flex-shrink: 0;
	}

	.tui-logistics {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 24rpx 0 20rpx;
		box-sizing: border-box;
	}

	.tui-logistics-text {
		font-size: 28rpx;
		line-height: 32rpx;
	}

	.tui-logistics-time {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 16rpx;
		color: #666;
	}

	.tui-addr {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.tui-addr-userinfo {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: bold;
	}

	.tui-addr-text {
		font-size: 24rpx;
		line-height: 30rpx;
		padding-top: 16rpx;
	}

	.tui-addr-tel {
		padding-left: 40rpx;
	}

	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 120rpx;
		height: 120rpx;
		display: block;
		flex-shrink: 0;
		border-radius: 3px;
	}

	.tui-goods-center {
		flex: 1;
		padding: 0 12rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color:#9e9e9e;
		line-height: 30rpx;
		padding-top: 0rpx;
		.food-primeCost{
			font-size: 12px;
			text-decoration: line-through;
			margin-right: 7px;
			color: #9e9e9e;
			line-height: 28px;
		}
	}

	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 24rpx;
	}

	.tui-size-24 {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-price-large {
		font-size: 32rpx;
		line-height: 30rpx;
	}

	.tui-goods-info {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-price-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-size24 {
		padding-bottom: 20rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #888;
	}

	.tui-size32 {
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: 500;
	}

	.tui-pbtm20 {
		padding-bottom: 20rpx;
	}

	.tui-flex-shrink {
		flex-shrink: 0;
	}

	.tui-primary-color {
		color: #EB0909;
	}

	.tui-order-info {
		margin-top: 20rpx;
	}

	.tui-order-title {
		position: relative;
		font-size: 28rpx;
		line-height: 28rpx;
		padding-left: 12rpx;
		box-sizing: border-box;
	}

	.tui-order-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		border-left: 4rpx solid #EB0909;
		height: 100%;
	}

	.tui-order-content {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.tui-order-flex {
		display: flex;
		padding-top: 18rpx;
	}

	.tui-order-flex:first-child {
		padding-top: 0
	}

	.tui-item-title {
		width: 132rpx;
		flex-shrink: 0;
		color: #666;
	}

	.tui-item-content {
		color: #666;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-tabbar {
		height: 98rpx;
		background: #fff;
		position: fixed;
		padding-right: 10px;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 999;
	}
	
	.tui-btn-mr {
		margin-right: 30rpx;
	}
</style>
